/**
 * Sonatype Nexus (TM) Open Source Version
 * Copyright (c) 2008-present Sonatype, Inc.
 * All rights reserved. Includes the third-party code listed at http://links.sonatype.com/products/nexus/oss/attributions.
 *
 * This program and the accompanying materials are made available under the terms of the Eclipse Public License Version 1.0,
 * which accompanies this distribution and is available at http://www.eclipse.org/legal/epl-v10.html.
 *
 * Sonatype Nexus (TM) Professional Version is available from Sonatype, Inc. "Sonatype" and "Sonatype Nexus" are trademarks
 * of Sonatype, Inc. Apache Maven is a trademark of the Apache Software Foundation. M2eclipse is a trademark of the
 * Eclipse Foundation. All other trademarks are the property of their respective owners.
 */
$card-width: 1016px;

.nxrm-usage-metrics-circuit-b {
  box-sizing: border-box;
  padding: var(--nx-spacing-6x) 0 0 var(--nx-spacing-6x);

  h2 {
    margin-top: 0;
  }

  .nx-card-container {
    justify-content: flex-start;
    max-width: $card-width;
  }

  .nx-card {
    flex: 1;
    max-width: none;
  }

  .nx-card__header {
    margin-bottom: var(--nx-spacing-2x);

    h3 {
      font-weight: 600;

      .nx-icon {
        margin-left: var(--nx-spacing-base);
        vertical-align: middle;
      }
    }
  }

  .nx-card__content {
    gap: var(--nx-spacing-6x);
  }

  .nx-card__text {
    display: flex;
    flex-direction: column;
    text-align: start;
    width: 100%;

    & > .nxrm-label {
      text-align: center;
    }
  }

  .nx-meter {
    margin: 0 0 var(--nx-spacing-2x);
    width: 100%;

    // Note: Firefox and Chrome pseudo-elements must be in separate declarations, as the browser invalidates the
    // entire thing if it doesn't recognize one pseudo-element
    &::-webkit-meter-optimum-value {
      background: #2AB472;
    }

    &::-moz-meter-bar {
      background: #2AB472;
    }

    &.nxrm-meter-approaching {
      &::-webkit-meter-optimum-value {
        background: var(--nx-swatch-yellow-50);
      }

      &::-moz-meter-bar {
        background: var(--nx-swatch-yellow-50);
      }
    }

    &.nxrm-meter-exceeding {
      &::-webkit-meter-optimum-value {
        background: var(--nx-swatch-orange-50);
      }

      &::-moz-meter-bar {
        background: var(--nx-swatch-orange-50);
      }

      &.starter-edition::-webkit-meter-optimum-value {
        background: var(--nx-swatch-red-40);
      }

      &.starter-edition::-moz-meter-bar {
        background: var(--nx-swatch-red-40);
      }
    }
  }

  .nxrm-label-container {
    display: flex;
    justify-content: space-between;

    &.no-meter {
      margin-top: var(--nx-spacing-6x);
    }
  }

  .nxrm-label {
    display: flex;
    flex-direction: column;

    &.start {
      align-items: flex-start;
    }

    &.end {
      align-items: flex-end;
    }

    & > :first-child {
      font-weight: bold;
    }

    & > :last-child {
      color: var(--nx-swatch-grey-30);
      font-size: var(--nx-font-size-xs);
    }
  }

  .nxrm-highest-records {

    & > :first-child {
      font-weight: bold;
    }

    & > :nth-child(2) {
      color: var(--nx-swatch-grey-30);
      font-size: var(--nx-font-size-xs);
    }

    & > span > .nx-icon {
      margin-left: 0;
      margin-right: 5px;
    }

    .recorded-count-with-error-icon {
      color: var(--nx-swatch-orange-45);

      &.starter-edition {
        color: var(--nx-swatch-red-40);
      }
    }
  }

  .nx-text-link {
    margin-top: var(--nx-spacing-4x);
    text-align: center;
  }

  .nx-divider {
    margin-bottom: 0;
    max-width: $card-width;
  }
}
